import { defineStore } from 'pinia'
import { ref } from 'vue'
import { themes } from '../styles/themes'

export const useAppStore = defineStore('app', () => {
  const currentTheme = ref(localStorage.getItem('theme') || 'default')
  const currentLang = ref(localStorage.getItem('lang') || 'zh-CN')

  const setTheme = (theme) => {
    currentTheme.value = theme
    localStorage.setItem('theme', theme)
    applyTheme(theme)
  }

  const setLang = (lang) => {
    currentLang.value = lang
    localStorage.setItem('lang', lang)
  }

  const applyTheme = (theme) => {
    const root = document.documentElement
    const themeConfig = themes[theme]
    if (!themeConfig) {
      console.error(`Theme "${theme}" not found`)
      return
    }
    Object.entries(themeConfig).forEach(([key, value]) => {
      root.style.setProperty(key, value)
    })
    console.log('Theme changed to:', theme)
  }

  // 初始化主题
  applyTheme(currentTheme.value)

  return {
    currentTheme,
    currentLang,
    setTheme,
    setLang
  }
}) 